<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>不添加key属性示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
    <div id="app">
        <template v-if="loginType === 'username'">
          <label>姓名：</label>
          <input type="text" placeholder="输入用户名" key="value1">
        </template>

        <template v-else>
          <label>邮箱：</label>
          <input type="text" placeholder="输入邮箱" key="value2">
        </template>

        <button @click="toggleLoginType">切换</button>
    </div>

    <script>
        new Vue({
          el:"#app",
          data:{
            loginType:"username"
          },
          methods:{
            toggleLoginType:function(){
              return this.loginType = this.loginType === 'username'?'email':'username'
            }
          }
        })
    </script>
</body>
</html>
